<template>
  <div>
    <!-- 新增一级菜单 -->
    <div class="inline-container">
      <el-button type="primary" icon="el-icon-plus" @click="chatModelAdd">新增</el-button>
      <el-button type="primary" icon="el-icon-setting" @click="apiKeySetting"
        >ApiKey设置</el-button
      >
      <div class="centered-search">
        <el-form :inline="true" :model="chatModelQuery" class="demo-form-inline">
          <el-form-item label="模型名称">
            <el-input
              v-model="chatModelQuery.model"
              placeholder="模型名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getChatModelData()">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 2、分隔线区域 -->
    <el-divider></el-divider>
    <!-- 3、表单 -->
    <el-table :data="chatModelData" style="width: 100%" border>
      <el-table-column type="index" width="80" label="序号"></el-table-column>
      <el-table-column prop="model" label="AI类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.contentType === 0">通义千问</span>
          <span v-else-if="scope.row.contentType === 1">通义万象</span>
          <span v-else>其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="model" label="模型名称" width="100"> </el-table-column>
       <el-table-column prop="apiKey" label="apiKey" width="200"> </el-table-column>
      <el-table-column prop="modelDesc" label="模型描述" width="200"> </el-table-column>
      <el-table-column prop="limitRule" label="限流规则" width="350"> </el-table-column>
      <el-table-column prop="status" label="历史缓存" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.isCache === 1">开启</span>
          <span v-else>关闭</span>
        </template>
      </el-table-column>
      <el-table-column prop="limitNum" label="限流数" width="100"> </el-table-column>
      <el-table-column prop="status" label="使用状态" width="200">
        <template slot-scope="scope">
          <el-switch
            @change="statusChange(scope.row)"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="2"
            active-text="使用中"
            inactive-text="未使用"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="upd(scope.row)"
            title="修改"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="del(scope.row.id)"
            title="删除"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="chatModelQuery.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="chatModelQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 新增弹框组件 -->
    <ai-model-add
      :dialogTitle="dialogTitle"
      :dialogAddVisible="dialogAddVisible"
      @dialog-addvisible-change="dialogAddVisibleChange"
      @ai-model-add="getChatModelData"
    ></ai-model-add>
    <!--修改弹框组件  -->
    <ai-model-upd
      :dialogTitle="dialogTitle"
      :dialogUpdVisible="dialogUpdVisible"
      :modelData="modelData"
      @dialog-updvisible-change="dialogUpdVisibleChange"
      @ai-model-upd="getChatModelData"
    ></ai-model-upd>
    <!--apiKey设置组件  -->
    <ai-Api-Key-Setting
      :dialogTitle="dialogTitle"
      :apiKeydialogVisible="apiKeydialogVisible"
      @apiKey_dialog-visible-change="apiKeydialogVisibleChange"
    ></ai-Api-Key-Setting>
  </div>
</template>

<script>
import { getChatModelList, delChatModel, updStatus } from "@/services/chatModel";
import AiModelAdd from "@/views/home/aiModelAdd.vue";
import AiModelUpd from "@/views/home/aiModelUpd.vue";
import AiApiKeySetting from "@/views/home/aiApiKeySetting.vue";
export default {
  name: "AIModel",
  components: {
    AiModelAdd,
    AiModelUpd,
    AiApiKeySetting,
  },
  data() {
    return {
      total: 0,
      chatModelData: [],
      chatModelQuery: {
        model: "",
        current: 1,
        size: 10,
      },
      dialogTitle: "",
      dialogAddVisible: false,
      dialogUpdVisible: false,
      apiKeydialogVisible: false,
      modelData: {},
    };
  },

  mounted() {
    this.getChatModelData();
  },

  methods: {
    getChatModelData() {
      getChatModelList(this.chatModelQuery)
        .then((res) => {
          this.total = res.data.total;
          this.chatModelData = res.data.records;
        })
        .catch((err) => {});
    },
    //分页处理
    handleSizeChange(val) {
      this.chatModelQuery.size = val;
      this.getChatModelData();
    },
    handleCurrentChange(val) {
      this.chatModelQuery.current = val;
      this.getChatModelData();
    },
    // 重置搜索框
    resetForm() {
      this.chatModelQuery = {
        model: "",
        current: 1,
        size: 10,
      };
      this.getChatModelData();
    },
    //新增弹框
    chatModelAdd() {
      this.dialogAddVisible = true;
      this.dialogTitle = "新增模型";
    },
    //修改弹框
    upd(row) {
      this.dialogUpdVisible = true;
      this.dialogTitle = "修改模型";
      this.modelData = row;
    },
    //关闭弹框
    dialogAddVisibleChange(val) {
      this.dialogAddVisible = val;
    },
    dialogUpdVisibleChange(val) {
      this.dialogUpdVisible = val;
    },
    //api key设置组件
    apiKeySetting() {
      this.apiKeydialogVisible = true;
      this.dialogTitle = "ApiKey";
    },
    apiKeydialogVisibleChange(val) {
      this.apiKeydialogVisible = val;
    },
    //使用状态修改
    statusChange(row) {
      updStatus(row.id)
        .then((res) => {
          this.getChatModelData();
        })
        .catch((err) => {});
    },
    //删除
    del(id) {
      this.$confirm("是否要删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delChatModel(id)
          .then((res) => {
            this.getChatModelData();
          })
          .catch((err) => {});
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.inline-container {
  height: 40px;
  display: flex;
  align-items: center; /* Optional: Align items vertically center if needed */
  .centered-search {
    margin-left: 30%;
    justify-content: center;
    margin-top: 26px;
  }
}
.page {
  display: flex;
  justify-content: flex-end;
}
</style>
